import React, { Component } from 'react'
import { Table, Divider, Col, Row, Popover } from 'antd'
import { CaretLeftOutlined } from '@ant-design/icons'
import './RightAside.less'

class Index extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectQuestion: []
        }
    }

    render() {
        return <div className='right-aside'>
            <div style={{ textAlign: 'center' }}>
                <span>可选题目</span>
            </div>
            <Divider />
            <div className='question-list'><Table
                showHeader={false}
                pagination={false}
                columns={[
                    {
                        title: '题目',
                        dataIndex: 'question',
                        width: '70%',
                        render: (text, record) => {
                            return <Row align='middle'>
                                <Col span={3}>
                                    <Popover content='点击添加至左侧' trigger="hover">
                                        <CaretLeftOutlined
                                            style={{ color: '#1890ff', fontSize: '20px', cursor: 'pointer' }}
                                            onClick={() => {
                                                this.props.onAdd(record.questionId)
                                            }} />
                                    </Popover>
                                </Col>
                                <Col span={21}>
                                    {text}
                                </Col>
                            </Row>
                        }
                    },
                    {
                        title: '课程',
                        dataIndex: 'course',
                        width: '30%',
                        ellipsis: true
                    }
                ]}
                dataSource={[
                    {
                        questionId: 1,
                        key: 1,
                        question: '一条很长很长很长很长很长很长很长很长很长很长很长很长很长很长的题目',
                        course: '数学'
                    },
                    {
                        questionId: 2,
                        key: 2,
                        question: '一条很长很长很长很长很长很长很长很长很长很长很长很长很长很长的题目',
                        course: '语文'
                    },
                    {
                        questionId: 3,
                        key: 3,
                        question: '一条很长很长很长很长很长很长很长很长很长很长很长很长很长很长的题目',
                        course: '英语'
                    },
                    {
                        questionId: 4,
                        key: 4,
                        question: '一条很长很长很长很长很长很长很长很长很长很长很长很长很长很长的题目',
                        course: '很长很长很长很长很长'
                    },
                ]}
            />
            </div>
        </div>
    }
}

export default Index